import {Button, Card, Form, message, Modal, Table} from "antd";
import {useEffect, useRef, useState} from "react";
import {reqAddRole, reqRoleList, reqUpdateRole} from "../../apis";
import AddForm from "./add-form";
import {update} from "store/plugins/all_tests";
import AuthForm from "./auth-form";

function Role() {
    // 所有角色列表
    const [roles,setRoles] = useState([])
    const [loading,setLoading] = useState(false)
    // 当前选择角色
    const [role,setRole] = useState({})
    // 是否打开确认框
    const [isShowAdd, setIsShowAdd] = useState(false)
    // 新增角色名
    const [roleName,setRoleName] = useState('')
    // 是否打开权限框
    const [isShowAuth, setIsShowAuth ]= useState(false)
    const [menu,setMenu] = useState([])
    const getRoleList = async() => {
        setLoading(true)
        const res = await reqRoleList()
        if(res.status === 0){
            setRoles(res.data)
            setLoading(false)
        }
    }

    useEffect(() => {
        getRoleList()
    }, []);
    const initColumns = () => {
        const columns = [{
            title: '角色名称',
            dataIndex: 'name',
        },{
            title: '创建时间',
            dataIndex: 'create_time',
        },{
            title: '授权时间',
            dataIndex: 'auth_time',
        },{
            title: '授权人',
            dataIndex: 'auth_name',
        }]
        return columns
    }

    const onRow = (role) => {
        return{
            onClick : (event) => {
                // 点击行
                console.log('选择角色为',role)
                setRole(role)
            }

        }
    }
    const form = Form.useForm()

    // 添加角色
    const addRole = async () => {
        console.log('关闭添加角色框')
        // 收集输入数据
        // 发请求
        const res = await reqAddRole(roleName)
        // 结果提示 列表显示
        if(res.status === 0){
            message.success('添加角色成功')
            await getRoleList()
            setIsShowAdd(false)
        }else{
            message.error('添加角色失败')
        }
    }

    const addRoleForm = (value) => {
        console.log('输入的value',value)
        setRoleName(value)
    }

    const setNewRole = (role) => {
        console.log('设置的role',role)
        setMenu(role)
        role.menus = menu
    }

    // 更新角色权限
    const updateRole = async () => {
        role.menus = menu
        role.authName = role.name
        console.log('此时的role',role)
        const res = await reqUpdateRole(role)
        console.log('更新角色结果',res)
        if(res.status === 0){
            message.success('更新角色成功')
        }else {
            message.error('更新角色失败')
        }
        setIsShowAuth(false)
    }


    const title = (
        <span>
            <Button type={"primary"} onClick={() => {
                // form.resetFields
                setIsShowAdd(true)
            }}>创建角色</Button>
            <Button
                style={{marginLeft: 10}}
                disabled={!role._id}
                onClick={() => {
                    setIsShowAuth(true)
                }}
            >
                设置角色权限</Button>
        </span>
    )
    return(
        <Card title={title}>
            <Table
                bordered
                rowKey='_id'
                loading={loading}
                dataSource={roles}
                pagination={{ defaultPageSize: 5, showQuickJumper: true }}
                rowSelection={{ type: 'radio',
                    selectedRowKeys: [role._id],
                    onSelect: (role) => {
                        //选择单个radio时触发回调
                        setRole(role)
                    }
                }}
                columns={initColumns()}
                onRow={onRow}
            ></Table>

            <Modal
                title="添加角色"
                open={isShowAdd}
                onOk={() => addRole()}
                onCancel={() => {
                    setIsShowAdd(false)
                }}
            >
                <AddForm
                    ref={form}
                    setForm={addRoleForm}
                />
            </Modal>

            <Modal
                title="设置角色权限"
                open={isShowAuth}
                onOk={updateRole}
                onCancel={() => {
                    setIsShowAuth(false)
                }}
            >
                <AuthForm
                    role={role}
                    setNewRole={setNewRole}
                />
            </Modal>
        </Card>
    )
}
export default Role;